<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  
  
  <title>  First React Project |   XHX 博客 </title>

 
  
    <link rel="icon" href="/images/favicon.ico">
  


  <link rel="stylesheet" href="/nayo.min.css"> 
</head>  
  <body>   
    
      <header class="header">
	
  <nav class="header-nav">        

    <span class="iconfont icon-menu mobile-toggle"></span>   	

    <div class="header-logo">
      <a href="/">
        <img class="header-logo-img" src="/images/head.JPG">
      </a>
    </div>

    <div class="header-menu">          
              
          
            <a class="header-menu-link" id="header-menu-home" href="/">
              <i class="iconfont icon-home">  
            </i></a>     
          
              
          
            <a class="header-menu-link" id="header-menu-archives" href="/archives">
              <i class="iconfont icon-archives">  
            </i></a>     
          
              
          
            <a class="header-menu-link" id="header-menu-tags" href="/tags">
              <i class="iconfont icon-tags">  
            </i></a>     
          
              
          
            <a class="header-menu-link" id="header-menu-about" href="/about">
              <i class="iconfont icon-about">  
            </i></a>     
          
              
          
              <a class="header-menu-link" id="header-menu-search">
                <i class="iconfont icon-search">  
              </i></a>
          
                  
    </div>  
    
  </nav>
</header>

   

      <div class="container">       
          
          
            <section class="main">  
          

          <article class="post">
  
	<div class="post-header">

	<p class="post-title">	
		First React Project
	</p>
			

	<div class="meta-info">	
	<span>
		Jun 11, 2018
	</span>

	
	
		<i class="iconfont icon-words"></i>
		<span>
			3389
		</span>
	
</div>

</div> 
	 

	  <div class="typo post-content slideDownMin">

		

			
					<h1 id="零、前提要求"><a href="#零、前提要求" class="headerlink" title="零、前提要求"></a>零、前提要求</h1><p>​    React 的开发和传统前端开发并不相同，因此要求也更高，这里我个人认为需要做到下面步骤不会懵逼，至少需要：</p>
<ol>
<li>能独立用传统 HTML+CSS 构建简单的 web 页面，不要求美观，至少能按照要求任意调整布局。</li>
<li>了解现代化的 flex 布局。</li>
<li>会写 JS 事件，对 ES6中的面向对象和模块化有理解。</li>
<li>简单的命令行操作以及了解 node 和 npm 一些命令。</li>
<li>React 入门，推荐博客：<a href="http://www.ruanyifeng.com/blog/2015/03/react.html" target="_blank" rel="noopener">阮一峰 React 教程</a>，内容不多，但是很实用。<a id="more"></a>
<h1 id="一、环境搭建"><a href="#一、环境搭建" class="headerlink" title="一、环境搭建"></a>一、环境搭建</h1></li>
</ol>
<p>需要环境：</p>
<ol>
<li><p>node</p>
</li>
<li><p>npm</p>
</li>
</ol>
<h1 id="二、创建项目"><a href="#二、创建项目" class="headerlink" title="二、创建项目"></a>二、创建项目</h1><p>​    在以上2个命令可以在Terminal 里面直接运行之后，就可以开始创建React 项目了。npm 给我们提供了一个完整的可以直接运行的项目模板。在Terminal 里输入以下：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx create-react-app [demo]</span><br></pre></td></tr></table></figure>
<p>​    等待一会儿，就在当前目录下生成一个 demo 文件夹，里面便有我们react 项目运行的完整结构。接着输入：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd demo</span><br><span class="line">npm start</span><br></pre></td></tr></table></figure>
<p>​    项目便会自动执行编译等步骤，最后会用 node 将项目运行在默认端口3000，并打开浏览器进入 <a href="http://localhost:3000" target="_blank" rel="noopener">http://localhost:3000</a> 运行。并显示启动页。</p>
<p><img src="https://xiaohaoxing-1257815318.cos.ap-chengdu.myqcloud.com/blog/react-homepage.png" alt=""></p>
<p>​    (下面还有一点欢迎文字被我删了= =)</p>
<p>​    根目录下的index.js 是项目运行的入口，在这里写的 ReactDOM.render() 可以看出把 App 组件绑定到#root 页面元素上，所以 App 这里是代表了整个页面的一个组件。我们自己的组件就可以加入到 App 组件里面，就可以显示在页面上了。</p>
<h1 id="三、添加组件"><a href="#三、添加组件" class="headerlink" title="三、添加组件"></a>三、添加组件</h1><p>​    创建项目之后就应该往里面添加自己的组件。其实现在前端开发的组件高度重复，因此 <a href="https://ant.design/docs/react/introduce-cn" target="_blank" rel="noopener">Ant Design</a> 给我们提供了相当多可以通用的组件，我们选择其中的<a href="https://ant.design/components/steps-cn/" target="_blank" rel="noopener">“步骤条”</a>来学习。</p>
<h4 id="1-导入-antd-库"><a href="#1-导入-antd-库" class="headerlink" title="1. 导入 antd 库"></a>1. 导入 antd 库</h4><p>​    在Terminal 输入</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install antd --save</span><br></pre></td></tr></table></figure>
<p>​    就完整导入了完整的 ant 库。也可以按照需求导入组件，这里不介绍了。</p>
<h4 id="2-创建组件"><a href="#2-创建组件" class="headerlink" title="2. 创建组件"></a>2. 创建组件</h4><p>​    在 src 中新建一个目录 component 作为组件的根目录，在里面新建文件progress.js。</p>
<h5 id="引入React-库、组件库、组件样式："><a href="#引入React-库、组件库、组件样式：" class="headerlink" title="引入React 库、组件库、组件样式："></a>引入React 库、组件库、组件样式：</h5><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">"react"</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123;Steps, Button, message&#125; <span class="keyword">from</span> <span class="string">"antd"</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> <span class="string">'antd/dist/antd.css'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Step = Steps.Step;	<span class="comment">//缩短使用 Step 的代码</span></span><br></pre></td></tr></table></figure>
<h5 id="添加步骤的节点数据："><a href="#添加步骤的节点数据：" class="headerlink" title="添加步骤的节点数据："></a>添加步骤的节点数据：</h5><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> steps = [&#123;</span><br><span class="line">    title:<span class="string">"Step1"</span>,</span><br><span class="line">    description:<span class="string">"The First"</span></span><br><span class="line">&#125;,&#123;</span><br><span class="line">    title:<span class="string">"Step2"</span>,</span><br><span class="line">    description:<span class="string">"The Second"</span></span><br><span class="line">&#125;,&#123;</span><br><span class="line">   title:<span class="string">"Step3"</span>,</span><br><span class="line">   description:<span class="string">"The Third"</span></span><br><span class="line">&#125;];</span><br></pre></td></tr></table></figure>
<h5 id="组件本身："><a href="#组件本身：" class="headerlink" title="组件本身："></a>组件本身：</h5><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Progress</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(props)&#123;</span><br><span class="line">        <span class="keyword">super</span>(props);</span><br><span class="line">        <span class="keyword">this</span>.state=&#123;</span><br><span class="line">            current:<span class="number">0</span>,</span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">    next()&#123;</span><br><span class="line">        <span class="keyword">const</span> current = <span class="keyword">this</span>.state.current + <span class="number">1</span>;</span><br><span class="line">        <span class="keyword">this</span>.setState(&#123;current&#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    prev()&#123;</span><br><span class="line">        <span class="keyword">const</span> current = <span class="keyword">this</span>.state.current - <span class="number">1</span>;</span><br><span class="line">        <span class="keyword">this</span>.setState(&#123;current&#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    render()&#123;</span><br><span class="line">        <span class="keyword">const</span> &#123;current&#125; = <span class="keyword">this</span>.state;</span><br><span class="line">        <span class="keyword">return</span>(</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">                &lt;Steps current=&#123;current&#125; style=&#123;&#123;<span class="attr">width</span>:<span class="number">90</span>+<span class="string">"%"</span>&#125;&#125;&gt;</span><br><span class="line">                    &#123;steps.map(<span class="function"><span class="params">i</span>=&gt;</span>&lt;Step key=&#123;i.title&#125; title=&#123;i.title&#125; description=&#123;i.description&#125;/&gt;)&#125;</span><br><span class="line">                &lt;/Steps&gt;</span><br><span class="line">                &lt;div className=<span class="string">"steps-content"</span> style=&#123;&#123;<span class="attr">padding</span>:<span class="number">10</span>&#125;&#125;&gt;&#123;steps[<span class="keyword">this</span>.state.current].description&#125;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">                &lt;div className="steps-btns"&gt;</span></span><br><span class="line"><span class="regexp">                &#123;</span></span><br><span class="line"><span class="regexp">                    this.state.current &lt; steps.length - 1</span></span><br><span class="line"><span class="regexp">                    &amp;&amp;</span></span><br><span class="line"><span class="regexp">                    &lt;Button type="primary" onClick=&#123;()=&gt;this.next()&#125;&gt;Next&lt;/</span>Button&gt;</span><br><span class="line">                &#125;</span><br><span class="line">                &#123;</span><br><span class="line">                    <span class="keyword">this</span>.state.current === steps.length - <span class="number">1</span></span><br><span class="line">                    &amp;&amp;</span><br><span class="line">                    &lt;Button type=<span class="string">"primary"</span> onClick=&#123;()=&gt;message.success(<span class="string">"Finished!"</span>)&#125;&gt;Done&lt;<span class="regexp">/Button&gt;</span></span><br><span class="line"><span class="regexp">                &#125;</span></span><br><span class="line"><span class="regexp">                &#123;</span></span><br><span class="line"><span class="regexp">                    this.state.current &gt; 0</span></span><br><span class="line"><span class="regexp">                    &amp;&amp;</span></span><br><span class="line"><span class="regexp">                    &lt;Button type="primary" style=&#123;&#123;marginLeft:8&#125;&#125; onClick=&#123;()=&gt;this.prev()&#125;&gt;Previous&lt;/</span>Button&gt;</span><br><span class="line">                &#125;</span><br><span class="line">                &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">            &lt;/</span>div&gt;</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><strong>注意</strong>：next、prev 方法，current 都是Steps 组件需要的。render 是输出函数，其中按钮相关的代码用到了 JS 中的短路知识。</p>
<h5 id="暴露出组件："><a href="#暴露出组件：" class="headerlink" title="暴露出组件："></a>暴露出组件：</h5><figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Pregress</span><br></pre></td></tr></table></figure>
<p>到这里，组件的编写就完成了。需要在页面中显示，就需要在 App 组件中加上我们的组件。</p>
<h4 id="3-插入-App-组件中"><a href="#3-插入-App-组件中" class="headerlink" title="3. 插入 App 组件中"></a>3. 插入 App 组件中</h4><p>​    打开 App.js，在 render 的 return 的 JSX 中插入我们的组件：</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div className=<span class="string">"App"</span>&gt;</span><br><span class="line">        ……</span><br><span class="line">        &lt;Progress&gt;&lt;/Progress&gt;</span><br><span class="line">      &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">    );</span></span><br><span class="line"><span class="regexp">  &#125;</span></span><br></pre></td></tr></table></figure>
<h4 id="4-查看效果"><a href="#4-查看效果" class="headerlink" title="4. 查看效果"></a>4. 查看效果</h4><p>​    这时保存文件，框架会自动检测变化并更新页面。打开浏览器就可以看到我们添加的组件了~</p>
<p><img src="https://xiaohaoxing-1257815318.cos.ap-chengdu.myqcloud.com/blog/react-component-progress.png" alt="Progress 组件"></p>
<p>​    点击下面的按钮就可以看到绑定的事件触发，具体原理结合上面代码理解~</p>
<h1 id="四、总结"><a href="#四、总结" class="headerlink" title="四、总结"></a>四、总结</h1><p>​    完成上面的组件的总结：React 的项目确实比传统开发更加省事，找到合适的组件并拼装起来就可以了。结合最近看的同构 Javascript，可以看出，这种现代化的开发已经可以从根本上避免同步+异步方式获取数据需要重写2遍代码的弊端（因为所有数据都是异步了）。回调陷阱也可以通过组件化和 state 这种事件机制得到避免。</p>
<h1 id="五、后续计划"><a href="#五、后续计划" class="headerlink" title="五、后续计划"></a>五、后续计划</h1><p>但是在高效的开发之下，其中的原理也是值得去学习的。后续还需要学习 Redux，并结合后台的 Restful 风格接口作出jsonp 的跨域web 应用解决方案。</p>
<p>参考资料：</p>
<ol>
<li>Ant Design React 组件库[<a href="https://ant.design/docs/react/introduce-cn" target="_blank" rel="noopener">https://ant.design/docs/react/introduce-cn</a>]</li>
<li>阮一峰 React 入门教程[<a href="http://www.ruanyifeng.com/blog/2015/03/react.html" target="_blank" rel="noopener">http://www.ruanyifeng.com/blog/2015/03/react.html</a>]</li>
<li>七牛云对象存储[<a href="https://portal.qiniu.com/bucket" target="_blank" rel="noopener">https://portal.qiniu.com/bucket</a>] （不仅可以存图像，还可以部署静态网站哦）</li>
</ol>
  	
					
	  </div>     
	  

	<div class="post-footer">

  <div class="post-footer-other">
      <span class="post-footer-item">
        




<span class="donate-btn">
	<span class="iconfont icon-donate"></span>
</span>


<div id="donate-box" class="sildeUpMin">

	<span class="donate-cancel iconfont icon-cancel"></span>

	<div class="donate-img-box">
		<img id="donate-qr-wechat" class="noLazyLoad donate-img" src="/images/donate1.png" alt="No Donate Image!">	
		<img id="donate-qr-alipay" class="noLazyLoad donate-img" src="/images/donate2.png" alt="No Donate Image!">	
	</div>

	<span class="donate-word">希望本文对你有帮助~</span>

	<div class="donate-list">
		<span class="iconfont icon-donate-wechat"></span>
		<span class="iconfont icon-donate-alipay"></span>
	</div>

</div>

 
      </span>           
      <span class="post-footer-item">
        
	
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=29a4323345125"></script>
	
	<span class="share-btn">
	<span class="iconfont icon-share"></span>
	</span>


	<div class="-mob-share sildeUpMin">
		<div class="-mob-inner">
		   			             
            <a class="iconfont icon-share-qq -mob-share-link"></a>		
     	   			             
            <a class="iconfont icon-share-weixin -mob-share-link"></a>		
     	   			             
            <a class="iconfont icon-share-weibo -mob-share-link"></a>		
     	   
		</div>
	</div>	

      </span>           
  </div>  

  <div class="post-footer-meta">
        	

        
          <i class="iconfont icon-tag"></i>     
            <a class="tag-link" href="/tags/React/">React</a> <a class="tag-link" href="/tags/前端/">前端</a>    
        	
  </div>

</div>


<nav class="post-footer-nav">
  
    <div class="post-footer-link">
      <a href="/2018/06/13/React实现异步加载数据/" id="post-nav-newer" class="post-nav-link-wrap">
        <strong class="post-nav-caption">newer</strong>
           
          <a class="post-nav-title" href="/2018/06/13/React实现异步加载数据/">
          React实现异步加载数据</a>
      </a>
    </div>
  
  
    <div class="post-footer-link">
      <a href="/2018/01/13/使用Hexo在github-io搭建博客/" id="post-nav-older" class="post-nav-link-wrap">
        <strong class="post-nav-caption">older</strong>
        
          <a class="post-nav-title" href="/2018/01/13/使用Hexo在github-io搭建博客/">
          使用Hexo在github.io搭建博客</a>
      </a>
    </div>
  
</nav>
 
	


    
    <div id="disqus_thread"></div>

    <script>
    (function() { 
    var d = document, s = d.createElement('script');
    s.src = 'https://'+'xiaohaoxing-github-io'+'.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());    
    (d.head || d.body).appendChild(s);
    })();
    </script>

    <noscript>Please enable JavaScript to view the  <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
    </noscript>


	
</article>

          </section> 
      </div>            
    
    <a id="backTop">
      <span>
        <i class="iconfont icon-backtotop"></i>
      </span>
    </a> 

  
    
    <div class="search-container sildeUpMin">
        <div class="search-header">
            <input type="text" placeholder="输入你想搜索的" id="search-input" class="search-input">
            <span class="search-cancel">
                <i class="iconfont icon-cancel">
            </i></span>
        </div>
        <div id="search-result" class="search-result"></div>
    </div>
 
     <div class="mobile-menu">      

      
      <img class="mobile-menu-icon lazyload" src="/images/placeholder.png" data-src="/images/favicon.ico">   
      

         
            

            <a class="mobile-menu-link" href="/">首頁
            </a>
            
         
            

            <a class="mobile-menu-link" href="/archives">歸檔
            </a>
            
         
            

            <a class="mobile-menu-link" href="/tags">標籤
            </a>
            
         
            

            <a class="mobile-menu-link" href="/about">關於
            </a>
            
         
                          

            <a class="mobile-menu-link mobile-menu-search" href="#">搜索 </a>                 
            
         
      
</div>        
    



     
    




<footer id="footer">	    

		
		<div class="footer-copyright">
		&copy;
				
		2018-
		
		2019		
	
		XiaoHaoxing
		<br>

		Theme By
		<a href="https://github.com/Lemonreds/hexo-theme-Nayo" target="_blank">Nayo</a>	
		</div>			
		<script src="https://s19.cnzz.com/z_stat.php?id=1274862886&web_id=1274862886" language="JavaScript"></script>
</footer>   

  

    <script src="/nayo.bundle.js"></script>           
  </body>        
</html>